<!--  -->
<template>
  <div class="container" ref="citySelect">
    <div class="city-item">
      <el-select v-model="province.value" :size="size" placeholder="请选择" @change="provinceChange" :clearable="true">
        <el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="city-item" v-if="cityShow">
      <el-select v-model="city.value" :size="size" placeholder="请选择" @change="selectCity" :clearable="true">
        <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="city-item" v-if="areaShow">
      <el-select v-model="area.value" :size="size" placeholder="请选择" @change="areaChange" :clearable="true">
        <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  import defcity from './area.js'
  export default {
    name: 'defCity',
    props: {
      areaShow: {
        type: Boolean,
        default: true
      },
      size: {
        type: String,
        default: 'medium'
      },
      cityShow: {
        type: Boolean,
        default: true
      },
      defData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        provinceList: [],
        cityList: [],
        areaList: [],
        province: {
          value: '',
          label: ''
        },
        city: {
          value: '',
          label: ''
        },
        area: {
          value: '',
          label: ''
        },
        address: {
          province: '',
          provinceCode: '',
          city: '',
          cityCode: '',
          area: '',
          areaCode: ''
        }
      }
    },
    watch: {
      defData(oldVal, newVal) {
        console.log(newVal)
        if (newVal) {
          if (this.defData.length > 0) {
            console.log(this.defData)
            this.provinceList.filter(res => {
              if (res.label === this.defData[0]) {
                this.province.value = res.label
                this.cityList = res.children
                this.province.label = res.label
                res.children.filter(re => {
                  if (re.label === this.defData[1]) {
                    this.city.value = re.label
                    this.areaList = re.children
                    this.city.label = re.label
                    re.children.filter(r => {
                      if (r.label === this.defData[2]) {
                        this.area.label = res.label
                        this.area.value = r.label
                      }
                    })
                  }
                })
              }
            })
          }
        }
      }
    },
    created() {
      this.provinceList = defcity
      if (this.defData.length > 0) {
        console.log(this.defData)
        this.provinceList.filter(res => {
          if (res.label === this.defData[0]) {
            this.province.value = res.label
            this.cityList = res.children
            this.province.label = res.label
            res.children.filter(re => {
              if (re.label === this.defData[1]) {
                this.city.value = re.label
                this.areaList = re.children
                this.city.label = re.label
                re.children.filter(r => {
                  if (r.label === this.defData[2]) {
                    this.area.label = res.label
                    this.area.value = r.label
                  }
                })
              }
            })
          }
        })
      }
      console.log(this.province)
      console.log(this.city)
      console.log(this.area)
    },
    methods: {
      provinceChange(code) {
        this.cityList = []
        this.areaList = []
        this.city.value = undefined
        this.provinceList.filter(res => {
          if (res.value === code) {
            this.cityList = res.children
            this.province.label = res.label
          }
        })
        let obj = {
          province: this.province,
          city: this.city,
          area: this.area
        }
        this.$emit('cityData', obj)
      },
      selectCity(code) {
        this.areaList = []
        this.area.value = undefined
        this.cityList.filter(res => {
          if (res.value === code) {
            this.areaList = res.children
            this.city.label = res.label
          }
        })
        let obj = {
          province: this.province,
          city: this.city,
          area: this.area
        }
        this.$emit('cityData', obj)
      },
      areaChange(code) {
        this.areaList.filter(res => {
          if (res.value === code) {
            this.area.label = res.label
          }
        })
        let obj = {
          province: this.province,
          city: this.city,
          area: this.area
        }
        this.$emit('cityData', obj)
      }
    }
  }
</script>
<style>
  .container {
    font-size: 0px;
    display: flex;
  }

  .city-item {
    display: inline-block;
    width: 133.33px;
  }

  .el-select {
    width: 100%;
  }

  /* .city-item + .city-item{
      margin-left: 10px;
    } */
</style>
